import React from 'react'
import { Button, message, Modal} from 'antd'
import Table from '../../components/Table'
import 'whatwg-fetch'
import API from '../../axios/api'
import { PermissionStatus, ProductType} from '../../utils/system-data'
import ProductForm from './product-form'

require('es6-promise').polyfill();

const confirm = Modal.confirm

let columns = [
    { dataIndex: 'Logo', title: 'Logo', width: 70,render: (text, record) =>  <img src={text} height="40" width="40" /> },
    { dataIndex: 'Name', title: '名字', width: 300,},
    { dataIndex: 'Rule', title: '规格', width: 200,},
    { dataIndex: 'MediaPrcie', title: '媒体价', width: 100,},
    { dataIndex: 'MemberPrice', title: '会员价', width: 100,},
]

export default class Product extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
            PermissionParentId: '',
            Page: 1,
            Pages:1,
        }
    }

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }



    // 获取表格数据
    fetchTableData =  async (currPage) => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
            MainGoodsBankIds: [""]
        }
        await API.fetchGoodPages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    getTabelData = async (currPage) => {
        let parms = {
            Page: currPage || 1,
            PageSize: 10,
            MainGoodsBankIds: [""]
        }
        await API.fetchGoodPages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List
                });
            }
            this.setState({
                loading: false
            });
        })
        return false
    }

    componentDidMount() {
        this.fetchTableData()
    }

    add = () =>{
        this.setState({
            modalShow: true
        })

    }

    onOk = (param) => {
        let that = this;
        API.addGoods(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                that.onCancel()
                that.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancel = () =>{
        this.setState({
            modalShow: false
        })

    }

    onOkEdit = (param) =>{

        API.editGood(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('编辑成功')
                this.onCancelEdit()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancelEdit = () =>{
        this.setState({
            modalShowEdit: false
        })
    }

    tableAction = (actionKey, item) => {
        if (actionKey === 'edit') {
            let _list = []
            if(item.ShareImage){
               const _temp =[{
                    uid: 0,
                    status: 'done',
                    url: item.ShareImage,
                    response: {
                        Data: item.ShareImage
                    }
                }]
                item.ShareImage = _temp
            }
            if(item.GoodsImageList){
                item.GoodsImageList .map(item => {
                    _list.push({
                        uid: item.Sort,
                        status: 'done',
                        url: item.ImageUrl,
                        response: {
                            Data: item.ImageUrl
                        }
                    })
                })
            }
            item.GoodsImageList = _list;
            this.setState({
                item: item,
                modalShowEdit: true
            })
        }else if (actionKey === 'delete') {
            confirm({
                title: '提示',
                content: '确定删除吗',
                onOk: () => {
                    this.handerDel(item).then(res => {
                        if(res.Code === 200){
                            this.fetchTableData()
                            message.success('删除成功')
                        }
                        else message.error(res.Message)
                    })
                },
                onCancel() {}
            })
        }
    }
     handerDel(item, status){
        return  API.delGood({Id: item.Id})
    }

    fields = () => {
        return [
            { label: '商品名字', type: 'input', name: 'Name',
                options: {
                    rules: [
                        { required: true, message: '商品名字必填!',}
                    ]
                }
            },
            { label: '商品规格', type: 'input', name: 'Rule'},
            { label: '商品库存', type: 'inputNumber', name: 'Stock', options:{setp: 1}},
            { label: '媒体价', type: 'input', name: 'MediaPrcie', },
            { label: '会员价', type: 'input', name: 'MemberPrice', },
            {
                label: '商品类型',
                type: 'select',
                name: 'GoodsType',
                items: () => ProductType,
                options: {
                    rules: [
                        { required: true, message: '商品类型必填!',}
                    ]
                }
            },
            { label: '商品详情', type: 'editor', name: 'Content', },
        ]
    }

    fieldsEdit = () => {
        const item = this.state.item
        return [
            { label: '权限名称', type: 'input', name: 'Name', items: item.PermissionDescribe,
                options: {
                    rules: [
                        { required: true, message: '权限名称必填!',}
                    ]
                }
            },
            {
                label: '权限类型',
                type: 'select',
                name: 'PermissionType',
                defaultValue: '后台',
                items: () => PermissionStatus,
                options: {
                    initialValue: item.PermissionType,
                    rules: [{
                        required: true,
                        message: '权限类型必输!',
                    }]
                }
            },
            { label: '功能地址', type: 'input', name: 'PageUrl'},
            { label: '功能描述', type: 'textarea', name: 'PermissionDescribe', options:{row: 2}},
            { label: '权限顺序', type: 'inputNumber', name: 'PermissionSort', options:{setp:1}}]
    }

    filedsEdit (){
        const item = this.state.item
        item.Content = JSON.parse(item.Content)
        let _list = []
        if(item.GoodsImageList ){
            item.GoodsImageList .map(item => {
                _list.push({
                    uid: item.Sort,
                    status: 'done',
                    url: item.ImageUrl,
                })
            })
        }
        item.GoodsImageList = _list;
        return item
    }

    render() {
        const formItemLayout = {
            labelCol: { span: 2 },
            wrapperCol: { span: 18 }
        }
        return (
            <div id="wrap">
                <div style={{ paddingTop: 10 }}>
                    <Button type="primary" onClick={this.add} >添加</Button>
                </div>
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            action={row => [
                                { key: 'edit', name: '编辑', color: 'blue', icon: 'edit'},
                                { key: 'delete', name: '删除', color: 'red', icon: 'delete'}
                            ]}
                            scroll={{y: 385 }}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                </div>
                <ProductForm
                    modalKey="add"
                    visible={this.state.modalShow}
                    title="添加"
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    okText="保存"
                />
                <ProductForm
                    modalKey="edit"
                    visible={this.state.modalShowEdit}
                    title="编辑"
                    onOk={this.onOkEdit}
                    onCancel={this.onCancelEdit}
                    okText="保存"
                    good={this.state.item}
                />
            </div>
        )
    }
}
